<style>
.el-range-separator{
  width: 10%;
}
.el-range-editor.el-input__inner {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
}
.el-scrollbar__view{
    margin-bottom: 21px;
}

</style>
<style scoped>
.mimachangebox >>> .el-input__inner {
  width: 270px;
}
.iconfont:hover{
  color:#007bff;
}
.iconfont{
  font-size: 25px;
}
#simulated_content {
  padding-top: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#simulated_content h4 {
  margin-bottom: 13px;
}
.segmentation {
  width:75%;
  height: 2px;
  border-top: solid 1px #e8ecf0;
}
.btn {
  display: inline-block;
  margin-left: 20px;
  margin-top: 3px;
  padding: 6px 20px;
  border-radius: 4px;
  background-color: #255da8;
  color: #fff;
  cursor: pointer;
}
.glyphicon {
  padding-top: 2px;
}
.modal {
  display: block;
  padding-right: 16px;
  display: none;
}
.modal_content {
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1) !important;
  position: relative;
  background-color: #fff;
}
/* .modal_header {
  background: #0d1c30;
  border-color: #e8ecf0;
  padding: 14px 15px 13px;
  min-height: 16.43px;
  border-bottom: 1px solid #e5e5e5;
} */
.modal_title {
  margin: 0;
  line-height: 1.42857143;
  font-family: inherit;
  font-weight: 500;
  color: #ffffff;
}
.glyphicon-remove {
  float: right;
  color: #c6c7c9;
}
.new_item {
  margin-bottom: 20px;
  clear: both;
}
.item_title {
  color: #333;
  width: 76px;
  float: left;
  line-height: 40px;
  margin-right: 16px;
  display: inline-block;
  margin-bottom: 10px;
}
.item_input,
.item_select {
  height: 40px;
  width: 302px;
  padding: 10px 9px;
  box-shadow: none;
  box-sizing: border-box;
  border: 1px solid #d9e1f1;
  margin-bottom: 0px;
  color: #333;
}
.combo_select {
  /*width: 302px;*/
  border: none;
  margin: 0;
}
.model_footer {
  border-top: none;
  text-align: center;
  padding-bottom: 33px;
}
.model_footer input {
  padding: 11px 66px;
  border: 1px solid #0d1c30;
  background: #fff;
  color: #0d1c30;
  box-shadow: none;
  text-shadow: none;
  border-radius: 2px !important;
}
</style>
<template>
    <div>
    <div id="simulated_content">
      <div style="height: 60px;width: 75%;display: flex;flex-direction: row;align-items:center;justify-content:space-between;">
        <div style="height: 60px;display: flex;flex-direction: row;align-items:center;justify-content:flex-start;">
          <div style="font-size: 18px;color:#00192f;align-self: flex-end;margin-bottom:15px;margin-right: 20px;">公司列表</div>
          <div v-if="permission.indexOf('F2') != -1" class="btn" @click="add()">
            <span class="glyphicon glyphicon-plus" style="margin-right: 2px;"></span>新建股票公司
          </div>
          <div v-if="permission.indexOf('F2') != -1" class="btn" style="margin-right: 20px;" @click="shuaxin()">
            <!-- <i class="iconfont icon-loop"></i> -->
            <span class="glyphicon glyphicon-equalizer" style="margin-right: 2px;"></span>刷新信息
          </div>
        </div>
        
        <!-- <div class="btn" style="background-color: red;">
          <span class="glyphicon glyphicon-trash" style="margin-right: 2px;"></span>删除
        </div> -->
        <!-- <div>
          <span class="glyphicon glyphicon-search"></span>
          <input type="text"  placeholder="公司名称" class="form-control" v-model="keyword" id="search" @change="searchcompanyList" />
        </div> -->
        <el-autocomplete
            popper-class="my-autocomplete"
            v-model="companynumber"
            :fetch-suggestions="getcompanynumberData"
            placeholder="请输入公司名称"
            @select="handleSelect">
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick">
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{item.stockNumber}}{{ item.companyName }}</div>
            </template>
          </el-autocomplete>
      </div>

      <div class="segmentation"></div>
      <div style="color: #6e747a;padding-top: 20px;padding-left: 8px;width: 75%;display: flex;align-items:center;justify-content:flex-start;">全部文件</div>
      <table id="strategyTable" class="table table-hover pointer" style="width: 75%;">
        <thead>
          <tr>
            <td width="10%" align="center">序号</td>
            <td width="20%">公司简称</td>
            <td width="10%" align="center">股票代码</td>
            <td width="15%" align="center">上市日期</td>
            <td width="15%" align="center">所属行业</td>
            <td width="10%" align="center">证券类型</td>
            <td width="10%" align="center">发行价</td>
            <td width="10%" align="center">操作</td>
          </tr>
        </thead>

        <tbody>
          <tr v-for="item in company" :key="item.id">
            <td align="center">{{item.id}}</td>
            <td>
              <img style="width: 20px;height: 20px;" src="../../../static/image/03.png" />
              <span>{{item.companyName}}</span>
            </td>
            <td align="center">{{item.stockNumber}}</td>
            <td align="center">{{item.listingDate}}</td>
            <!-- <td align="center" style="color:red;font-weight:600;" v-if="item.sate === 0">停止</td> -->
            <!-- <td align="center" style="color:green;font-weight:600;" v-if="item.sate === 1">运行中</td> -->
            <td align="center">{{item.industry}}</td>
            <td align="center">{{item.securitiesType}}</td>
            <td align="center">{{item.issuancePrice}}</td>
            <td align="center">
              <i class="iconfont icon-zhexiantutongji" @click="companydetail(item.id)"></i>
              <i v-if="permission.indexOf('F2') != -1" class="iconfont icon-delete" @click="del(item.id)"></i>
              <i v-if="permission.indexOf('F2') != -1" class="iconfont icon-edit" @click="edit(item.id)"></i>
              <!-- <i class="iconfont icon-delete" style="opacity:0.8;" ></i> -->
            </td>
          </tr>
        </tbody>
      </table>
      <div v-if="totalCount == 0" style="width:75%;text-align:center;margin:30px 10px;font-size:20px;font-weight:600">当前无公司信息</div>
      <div class="page" style="margin:12px 12px 20px 0px;">
        <!-- <Pagination :Current.sync="Current" :limit="limit" :totalCount="totalCount" @turn="getcompanyList"></Pagination> -->
        <el-pagination
        background
        layout="prev, pager, next"
        @current-change="changecompanyList"
        :page-size="limit"
        :total="totalCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination  from './../zujian/Pagination'
export default {
    components: {
        Pagination
    },
    data(){
        return{
            company:[],
            Current: 1,
            limit: 10,
            totalCount: 100,
            keyword:'',
            sessionToken:'',
            companynumber:'',
            companyList:[],
            permission:[],
        }
    },
    mounted(){
        if(localStorage.getItem('SessionToken') != null){
          this.sessionToken = localStorage.getItem('SessionToken')
        }
        if(localStorage.getItem('permission') != null){
          this.permission = localStorage.getItem('permission').split(",")
        }
        this.getcompanyList()
    },
    methods:{
      shuaxin(){
         this.$Modal.confirm({
          title: '刷新确认',
          content: '确认刷新股票公司信息吗？',
          onOk: () => {
            this.$http.get('stock/updateAllStockCompany?sessionToken'+this.sessionToken+'').then((resp) => {
              if (resp.data.status === 200) {
                this.$message.succrss('股票刷新成功！')
              } else {
                this.$message.error(resp.data.msg)
              }
            })
          },
          onCancel: () => {
            this.$Message.info('刷新已取消')
          }
        })
        
      },
      handleSelect(item) {
        console.log(item);
        this.stocknumber = item.stocknumber
        localStorage.setItem('companyid',item.id)
        this.$router.push('/company_detail')
      },
      handleIconClick(ev) {
        console.log(ev)
        
      },
      getcompanynumberData(queryString, cb){
      this.$http.get('stock/listStockCompaniesByStockNumberOrCompanyName?keyword='+this.companynumber+'').then((resp) => {
        if (resp.data.status === 200) {
          console.log(resp.data)
          this.companyList = resp.data.data
          cb(this.companyList)
        } else {
          this.$message(resp.data.msg)
        }
      })
    },
        getcompanyList(val){
            // let a = val
            // if(a !== ''){
            //     this.Current = val
            // }
            // console.log(val)
            this.$http.get('stock/listAllCompany?pageNum=1&pageSize='+this.limit+'').then((resp) => {
                if (resp.data.status === 200) {
                    this.totalCount = resp.data.data[0].total
                    this.company = resp.data.data[0].list
                    console.log(resp.data)
                }else if(resp.data.status === 499){
                    this.$message.error('当前用户没有该权限！')
                }else {
                    console.log('获取公司信息失败')
                }
            })
        },
        changecompanyList(val){
            // let a = val
            // if(a !== ''){
            //     this.Current = val
            // }
            // console.log(val)
            this.$http.get('stock/listAllCompany?pageNum='+val+'&pageSize='+this.limit+'').then((resp) => {
                if (resp.data.status === 200) {
                    this.totalCount = resp.data.data[0].total
                    this.company = resp.data.data[0].list
                    console.log(resp.data)
                }else if(resp.data.status === 499){
                    this.$message.error('当前用户没有该权限！')
                }else {
                    console.log('获取公司信息失败')
                }
            })
        },
        searchcompanyList(){
            this.$http.get('stock/listStockCompaniesByCompanyName?companyName='+this.keyword+'&pageNum=1&pageSize='+this.limit+'').then((resp) => {
                if (resp.data.status === 200) {
                    this.company = resp.data.data[0].list
                    this.totalCount = resp.data.data[0].total
                    console.log(resp.data)
                }else if(resp.data.status === 499){
                    this.$message.error('当前用户没有该权限！')
                }else {
                    console.log('获取公司信息失败')
                }
            })
        },
        edit(id){
          localStorage.setItem('companyid',id)
          this.$router.push('/company_edit')
        },
        companydetail(id){
          localStorage.setItem('companyid',id)
          this.$router.push('/company_detail')
        },
        del(id){
          this.$Modal.confirm({
        title: '删除确认',
        content: '确认删除吗？',
        onOk: () => {
          this.$http.post('stock/deleteStockCompanyById?sessionToken='+this.sessionToken+'&id='+id+'').then((resp) => {
                if (resp.data.status === 200) {
                  this.$message.success('删除成功！')
                  this.getcompanyList()
                }else if(resp.data.status === 499){
                    this.$message.error('当前用户没有该权限！')
                }else if(resp.data.status === 599){
                    this.$message.error('登陆状态失效，请重新登录！')
                    localStorage.clear()
                    this.$router.push('/login')
                }else {
                    console.log('获取公司信息失败')
                }
          })
        },
        onCancel: () => {
          this.$Message.info('删除已取消')
        }
      })
        },
        add(){
          this.$router.push('company_add')
        }
    }
}
</script>